import React = require("react");
import { Page } from "maishu-chitu-react";
import { MemberService } from "mobile/services/memberService";
import { FormValidator, rules } from "maishu-dilu";
import { defaultNavBar } from "mobile/site";
import * as ui from "maishu-ui-toolkit";
import ReactDOM = require("react-dom");


export default function (page: Page) {
    let member = page.createService(MemberService);
    let usernameInput: HTMLInputElement;
    let passwordInput: HTMLInputElement;
    let formElement: HTMLFormElement;
    let validator: FormValidator;

    let returnString = (page.data.return || 'user_index') as string;

    var jsx = <>
        <header>
            {defaultNavBar(page, { title: "登录" })}
        </header>
        <section>
            <form className="form-horizontal container"
                ref={(e: HTMLFormElement) => formElement = e || formElement}>
                <div className="form-group">
                    <div className="col-xs-12">
                        <input type="text" name="username" className="form-control" placeholder="手机号码"
                            ref={(e: HTMLInputElement) => usernameInput = e || usernameInput} />
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-xs-12">
                        <input type="password" name="password" className="form-control" placeholder="密码"
                            ref={(e: HTMLInputElement) => passwordInput = e || passwordInput} />
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-xs-12">
                        <button id="Login" type="button" className="btn btn-primary btn-block"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = ui.buttonOnClick(async () => {
                                    if (!validator) {
                                        validator = new FormValidator(formElement,
                                            { name: "username", rules: [rules.required(), rules.mobile()] },
                                            { name: "password", rules: [rules.required()] }
                                        );
                                    }

                                    if (!validator.check())
                                        return;

                                    await member.login(usernameInput.value, passwordInput.value);
                                    page.app.showPage(returnString, {}, true);
                                });
                            }}>立即登录</button>
                    </div>
                    <div className="col-xs-12 text-center" style={{ marginTop: 10 }}>
                        <a href="#user_register" className="pull-left">我要注册</a>
                        <a href="#user_resetPassword" className="pull-right">忘记密码</a>
                    </div>
                </div>
            </form>
        </section>
    </>

    ReactDOM.render(jsx, page.element);
}